<template>
  <div class="app-container" style="background-color: #ecf0f5 !important">
    <!-- 查询和其他操作 -->
    <div class="filter-container" style="background-color: #ecf0f5 !important">
      <el-button
        :style="{ display: visibleSubmit }"
        class="filter-item"
        type="primary"
        icon="el-icon-back"
        @click="handleFilter(2, null, null)"
      />
      <el-date-picker
        v-model="month"
        type="month"
        clearable
        class="filter-item"
        placeholder="选择日期"
      />
      <!-- v-permission="['smartReports:monthSmart:read']" -->
      <el-button
        class="filter-item"
       :style="{background:buttonColor.lookup,color:buttonColor.color}"
        icon="el-icon-search"
        @click="handleFilter(3, null, null)"
        >查找</el-button
      >
    </div>
    <div class="list textone">
      <div class="uni-flex uni-row off" style="min-height: 2rem">
        <div class="text1Title">地区</div>
        <div class="text2Title">当月</div>
        <div class="text2Title">占比</div>
        <div class="text2Title">环比</div>
        <div class="text2Title">环比率</div>
        <div class="text2Title">同比</div>
        <div class="text2Title">同比率</div>
      </div>
      <div
        v-for="item in dataList"
        :key="item.fsiteNo + '_' + '1'"
        class="uni-flex uni-row on"
        @click="handleFilter(1, item.fsiteNo, item.fsiteName)"
      >
        <div class="text1">
          {{ item.fsiteName != null ? item.fsiteName : item.fpointName }}
        </div>
        <div class="text2">{{ item.fusenum1 }}</div>
        <div class="text2">{{ item.fnumrate1 }}</div>
        <div class="text2">{{ item.fusenum2 }}</div>
        <div class="text2">
          {{ item.fnumrate2 }}%
          <i
            v-if="item.fflag2 === 1"
            style="color:#ff0000 ; font-size: 25px"
            class="el-icon-top"
          />
          <i
            v-if="item.fflag2 === 0"
            style="color:#00ff60 ; font-size: 25px"
            class="el-icon-bottom"
          />
        </div>
        <div class="text2">{{ item.fusenum3 }}</div>
        <div class="text2">
          {{ item.fnumrate3 }}%
          <i
            v-if="item.fflag3 === 1"
            style="color:#ff0000 ; font-size: 25px"
            class="el-icon-top"
          />
          <i
            v-if="item.fflag3 === 0"
            style="color:#00ff60 ; font-size: 25px"
            class="el-icon-bottom"
          />
        </div>
      </div>
    </div>

    <div>
      <div
        id="myChartMonth"
        :style="{ width: '100%', height: '250px', backgroundColor: '#fff' }"
      />
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import {buttonColor} from '@/filters/index'
var fsiteNoList = [];
var fsiteNameList = [];

export default {
  name: "Area",
  data() {
    return {
      buttonColor:buttonColor,
      tier: undefined,
      userifo: undefined,
      month: new Date(),
      fsiteName: "",
      visibleSubmit: "none",
      dataList: null,
      loading: true,
      listQuery: {
        date: undefined,
        fsiteNo: undefined,
      },
    };
  },
  computed: {
    yearMonth() {
      var date = new Date(this.month);
      var ym;
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      if (m < 10) {
        m = "0" + m;
      }
      ym = "" + y + "-" + m;
      return ym;
    },
    fsizecom() {
      return this.visibleSubmit === "none" ? 22 : 20;
    },
  },
  created() {
    this.userifo = this.$store.state.user;
    this.handleFilter(0, this.userifo.fsiteNo, this.userifo.fsiteName);
  },
  methods: {
    handleFilter: function (ffrom, fsiteNo, fsiteName) {
      // ffrom 0：刚进页面，1：进入行，2：返回，3：查询
      if (ffrom === 0) {
        // 刚进页面
        this.tier = 1;
        this.visibleSubmit = "none";
        // 赋予层对应的fsite
        fsiteNoList[this.userifo.fsiteLevel + this.tier] = fsiteNo;
        fsiteNameList[this.userifo.fsiteLevel + this.tier] = fsiteName;
        this.listQuery.fsiteNo = fsiteNo;
        this.fsiteName = fsiteName;
      } else if (ffrom === 1) {
        this.tier += 1;
        this.visibleSubmit = "";
        // 赋予层对应的fsite
        fsiteNoList[this.userifo.fsiteLevel + this.tier] = fsiteNo;
        fsiteNameList[this.userifo.fsiteLevel + this.tier] = fsiteName;
        this.listQuery.fsiteNo = fsiteNo;
        this.fsiteName = fsiteName;
      } else if (ffrom === 2) {
        // 返回
        this.tier -= 1;
        if (this.tier === 1) {
          this.visibleSubmit = "none";
        }
        this.listQuery.fsiteNo =
          fsiteNoList[this.userifo.fsiteLevel + this.tier];
        this.fsiteName = fsiteNameList[this.userifo.fsiteLevel + this.tier];
      }

      this.listQuery.date = this.yearMonth;
      this.loading = true;
      listAir(this.listQuery)
        .then((response) => {
          this.dataList = response.data.data.list;
          this.loading = false;
          // this.showChartPie()
        })
        .catch(() => {
          this.dataList = [];
          this.loading = false;
        });
      listAirLine({
        date: this.listQuery.date,
        fsiteNo: this.listQuery.fsiteNo,
      })
        .then((response) => {
          const categories = [];
          const datas = [];
          const fusenum1 = [];
          const fusenum2 = [];
          const fusenum3 = [];

          response.data.data.list.map((item) => {
            fusenum1.push(Number(item.fusenum1).toFixed(3));
            fusenum2.push(Number(item.fusenum2).toFixed(3));
            fusenum3.push(Number(item.fusenum3).toFixed(3));
            categories.push(item.ftime);
          });

          datas.push({
            name: "当月",
            type: "line",
            data: fusenum1,
            itemStyle: { normal: { label: { show: true } } },
            lineStyle: {
              normal: {
                width: 4,
              },
            },
          });
          datas.push({
            name: "同比",
            type: "line",
            data: fusenum3,
            itemStyle: { normal: { label: { show: true } } },
            lineStyle: {
              normal: {
                width: 4,
              },
            },
          });
          datas.push({
            name: "环比",
            type: "line",
            data: fusenum2,
            itemStyle: { normal: { label: { show: true } } },
            lineStyle: {
              normal: {
                width: 4,
              },
            },
          });
          this.showChartPie(categories, datas);
        })
        .catch(() => {
          this.categories = [];
          this.datas = [];
        });
    },
    showChartPie(categories, datas) {
      // 基于准备好的dom，初始化echarts实例
      const myChartMonth = this.$echarts.init(document.getElementById("myChartMonth"));
      // 绘制图表
      myChartMonth.setOption({
        title: {
          text: this.yearMonth + " " + this.fsiteName + "用电",
          left: "center",
          textStyle: {
            fontSize: 24,
          },
        },
        color: ["#4472C5", "#ED7C30", "#80FF80", "#FF8096", "#800080"],
        legend: {
          data: ["当月", "同比", "环比"],
          top: "40%",
          left: "90%",
          textStyle: {
            //图例文字的样式
            fontSize: 18,
            fontWeight: "bold",
          },
          orient: "vertical",
        },
        grid: {
          left: "6%",
          right: "10%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: categories,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16, //更改坐标轴文字大小
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 16, //更改坐标轴文字大小
            },
          },
        },
        series: datas,
        tooltip: {
          trigger: "axis",
        },
      });
    },
  },
};
export function listAir(query) {
  return request({
    url: "/report/macreport003",
    method: "get",
    params: query,
  });
}
export function listAirLine(query) {
  return request({
    url: "/report/macreport004",
    method: "get",
    params: query,
  });
}
</script>

<style scoped>
.text1Title {
  width: 600px;
  color: #000000;
  font-weight: bold;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #f7f7f7;
  border-top: 3px solid #409eff;
  background-color: #fff !important;
}

.text2Title {
  width: 350px;
  color: #000000;
  font-weight: bold;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #f7f7f7;
  border-top: 3px solid #409eff;
  background-color: #fff !important;
}
.text1 {
  width: 600px;
  color: #000000;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #f7f7f7;
}

.text2 {
  width: 350px;
  color: #000000;
  text-align: center;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #f7f7f7;
}
.on {
  background: #fff;
}

.list {
  background-color: #ecf0f5 !important;
  padding-bottom: 30px;
  box-sizing: border-box;
  flex: 1;
  flex-direction: column;
  display: flex;
  padding-top: 10px;
  height: 30%;
  flex: 2;
  text-align: left;
}
.uni-row {
  flex-direction: row;
}
.uni-flex {
  display: flex;
  flex-direction: row;
}
.list>div:hover{
    background-color: #f4f4f4;
  }
  .list.textone>div:nth-child(2){background-color:#eaeaea;pointer-events: none;}
</style>
